<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title><?php echo $page_title?></title>
		<link href="<?php echo base_url(); ?>images/icono.ico" rel="shortcut icon" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/registrate.css">
		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/tabs.css">
		
		<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.min.js"></script>
		<script type="text/javascript">
			function cambiaDocumento (select) {
				var selectedOption = select.options[select.selectedIndex];
    			//alert ("The selected option is " + selectedOption.value);
    			$('#doc').load('cargarDocumento?cbxDocumento='+selectedOption.value);
			}
			
			function cambiaProvincia (select) {
    			var selectedOption = select.options[select.selectedIndex];
        		//alert ("The selected option is " + selectedOption.value);
        		$('#pro').load('cargarProvincia?cbxDepartamento='+selectedOption.value);
    		}

    		function cambiaDistrito () {
    			/*
    	    	 * 02/06/2015
    	    	 se llamo a provincia y departamento por medio de variables y luego
    	    	 se las paso a la funcion cargarDistrito 	 
    	    	 */
    			var prov = document.Rcliente.cbxProvincia.value;  
    			var dept = document.Rcliente.cbxDepartamento.value;     		
        		$('#dis').load('cargarDistrito?prov='+prov+'&dept='+dept);
    		}        
		</script>
		
		<script type="text/javascript">
			function justNumbers(e){
				var keynum = window.event ? window.event.keyCode : e.which;
        		if ((keynum == 8) || (keynum == 46))
					return true;
         		return /\d/.test(String.fromCharCode(keynum));
        	}
		</script>
		
	</head>
	<body>

	<div class="flex-container">
		<div>
			<img class="barra"
				src="<?php echo base_url();?>images/repuestock.png" />
		</div>
		<div>
			<img class="barra" src="<?php echo base_url();?>images/red.png" />
		</div>
	</div>
	
	<section id="main">
	
	<h4
					class="<?php
        			if (isset($class))
            			echo $class;
        			else
            			echo "alert_info"?>">
        			<?if (isset($mensaje))
            			echo $mensaje; else
            			echo "Usted puede buscar y/o ordenar los datos.";?>
   			 	</h4>

				<article class="module width_full">
					<header>
						<h3><?= $page_title ?></h3>
					</header>
					<div class="module_content" id="contenido">
						<? if (isset($logo))
    					echo "<center><img src='" . base_url() . "images/bienvenido.png' height='225' width='500'></center>"; ?>		
	
	<div class="formulario">	
	<form name="Rcliente" action="<?php echo base_url(); ?>index.php/cliente_afuera/insertar_afuera" method="POST">
		<center><input type="button" onclick="location.href='<?php echo base_url();?>'" value="Regresar"></center><br/>
		<fieldset>
			<legend style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">Datos del Cliente</legend>	
				<table>
					<tr>
						<td><label>Usuario:</label></td>
						<td><input type="text" name="txtUsuario" size="50" placeholder="Nombre del usuario" title="Letras (no tildes y ñ), números y '_'"
					pattern="[a-zA-Z0-9_]{2,40}" maxlength="40" required></td>
					</tr>
					<tr>
               			<td><label>Contraseña:</label></td>
                		<td><input type="password" name="txtPassword" size="50" placeholder="Contraseña" title="Letras (no tildes y ñ), números y '_'"
					pattern="[a-zA-Z0-9_]{2,40}" maxlength="40" required></td>
            		</tr>
            		<tr>
            			<td colspan=2>
            			<section class="tabs">
							<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" value="1"/>
							<label style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif" for="tab-1" class="tab-label-1" accessKey = "tab-1">Persona Natural</label>
							<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" value="2"/>
							<label style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif" for="tab-2" class="tab-label-2" accessKey = "tab-2">Persona Jurídica</label>
							<div class="clear-shadow"></div>
							<div class="content">
								<div class="content-1">
									<section id = "otros" name = "otros">
									<table>
										<tr>
											<td><p>Nombres:</p></td>
											<td><input type="text" name="txtNombres" size="50" onkeyup="javascript:this.value=this.value.toUpperCase()" placeholder="Nombres del Cliente" title="Letras y espacios en blanco. NO incluir tildes, el caracter ñ y minusculas"
													pattern="[A-Z ]{2,40}" maxlength="40" required></td>
										</tr>
										<tr>
											<td><p>Apellidos:</p></td>
											<td><input type="text" name="txtApellidos" size="50" onkeyup="javascript:this.value=this.value.toUpperCase()" placeholder="Apellidos del Cliente" title="Letras y espacios en blanco. NO incluir tildes, el caracter ñ y minusculas"
													pattern="[A-Z ]{2,40}" maxlength="40" required></td>
										</tr>
										<tr>
											<td><p>Tipo de Documento:</p></td>
											<td>
												<select id="cbxDocumento" name="cbxDocumento" onchange="cambiaDocumento(this)" required>
													<option value=""><?php echo STR_VALOR_INICIAL;?></option>
													<?php foreach ($tipo_documento as $td):?>
													<option value="<?= $td->id_tabla_maestra ?>"><?= $td->nombre?></option>
													<?php endforeach;?>
												</select>
											</td>
										</tr>										 
										<tr>
											<td><p>N° Documento:</p></td>
											<td>
												<div id="doc" class="content-1" style="left: 27.2%; top: 52%;">
													<input type='text' name='txtNumdoc' size='25' placeholder='Número de documento' title='Solo números' pattern='[0-9]{8,11}' maxlength="11" onkeypress="return justNumbers(event)" disabled/>
												</div> 
                							</td>
										</tr>
										<tr>
											<td><p>Fecha de Nacimiento:</p></td>
											<td><input type="date" name="dNacimiento" size="50" max="<?php echo date('Y-m-d', strtotime('-18 year'));?>" required></td>
										</tr>
									</table>
									</section>							
								</div>
								<div class="content-2">
									<section id = "otros1" name = "otros">
									<table>
										<tr>
											<td><p>RUC:</p></td>
											<td><input type="text" name="txtRuc" size="50" placeholder='Número de RUC' title='Solo números' pattern='[0-9]{11}' maxlength="11" onkeypress="return justNumbers(event)" required/></td>
										</tr>
										<tr>
											<td><p>Razón Social:</p></td>
											<td><input type="text" name="txtRazon" size="50" onkeyup="javascript:this.value=this.value.toUpperCase()" placeholder="Nombre de Razón Social" title="Letras y Números y (&). NO incluir minusculas"
													maxlength="110" required></td>
										</tr>									
									</table>
									</section>
								</div>
							</div>
						</section>
						</td>
            		</tr>			
				</table>
		</fieldset>
		<fieldset>
			<legend style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">Datos de Domicilio</legend>	
				<table>
					<tr>
						<td><label>Departamento:</label></td>
						<td>
							<select id="cbxDepartamento" name="cbxDepartamento" onchange="cambiaProvincia(this)" required>
								<option value=""><?= STR_VALOR_INICIAL?></option>
									<?php foreach ($departamento as $d):?>
									<option value="<?= $d->cod_dept ?>">
										<?= $d->nombre_ubigeo ?>
									</option>
								<?php endforeach; ?>
							</select>
						</td>
					</tr>
					<tr>
						<td><label>Provincia:</label></td>
						<td>
							<div id="pro">
							<select name="cbxProvincia" required>
								<option value=""><?= STR_VALOR_INICIAL?></option>
							</select>
							</div>
						</td>
					</tr>
					<tr>
						<td><label>Distrito:</label></td>
						<td>
							<div id="dis">
							<select name="cbxDistrito" required>
								<option value=""><?= STR_VALOR_INICIAL?></option>
							</select>
							</div>
						</td>
					</tr>
					<tr>
               			<td><label>Dirección:</label></td>
                		<td><input type="text" name="txtDireccion" size="50" onkeyup="javascript:this.value=this.value.toUpperCase()" maxlength="60" pattern="[A-Z0-9ÁÉÍÓÚÑ&Ü /*|°.]{5,60}" required></td>                   
            		</tr>
            		<tr>
               			<td><label>Correo:</label></td>
                		<td><input type="email" name="txtCorreo" placeholder="Ej: example@example.com" size="50" maxlength="60" required="required"></td>                   
            		</tr>
            		<tr>
               			<td><label>Teléfono/Celular:</label></td>
                		<td><input type="tel" name="txtTelefono" placeholder="Número de teléfono y/o celular" size="50" pattern="[0-9]{7,9}" maxlength="9" onkeypress="return justNumbers(event)" required></td>                   
            		</tr>
				</table>
		</fieldset>
		<table>
			<tr>
               	<td>
               		<input type="checkbox" name="ckbTerminos" required/>
               		<label>He leído los términos y condiciones</label>
               	</td>
            </tr>
            <tr>
            	<td>
            		<a href="<? echo base_url();?>index.php/cliente_afuera/terminos_condiciones" target="_blank">Términos y condiciones</a>
            	</td>                   
            </tr>
			<tr>
				<td>
				<center>
					<input type="submit"
					value="Registrarse">
					<input type="reset" value="Limpiar"></center>
				</td>
			</tr>
		</table>

		<script type = "text/javascript"> 
			var opcionX = document.getElementById("tab-1"); 
			var opcionY = document.getElementById("tab-2"); 
			var seccion = document.getElementById("otros");
			var seccion1 = document.getElementById("otros1"); 

			opcionX.addEventListener("click", function() { 
			var cajas = seccion.getElementsByTagName("input");
			var listas = seccion.getElementsByTagName("select");

			for (i = 0; i < cajas.length; i++) { 
				if (cajas[i].getAttribute("type") === "text"||"date")
					cajas[i].disabled = false; 
			}

			for (i = 0; i < listas.length; i++) { 
				listas[i].disabled = false; 
			}

			var cajas = seccion1.getElementsByTagName("input");
			for (i = 0; i < cajas.length; i++) { 
				if (cajas[i].getAttribute("type") === "text"||"date")
				cajas[i].disabled = true; 
			}
			}, false); 

			opcionY.addEventListener("click", function() { 
			var cajas = seccion.getElementsByTagName("input");
			var listas = seccion.getElementsByTagName("select");

			for (i = 0; i < cajas.length; i++) { 
				if (cajas[i].getAttribute("type") === "text"||"date") 
				cajas[i].disabled = true; 
			}

			for (i = 0; i < listas.length; i++) { 
				listas[i].disabled = true; 
			}

			var cajas = seccion1.getElementsByTagName("input");

			for (i = 0; i < cajas.length; i++) { 
				if (cajas[i].getAttribute("type") === "text"||"date") 
				cajas[i].disabled = false; 
			}
			}, false);
		</script> 
		
	</form>
</div>
	
</body>
</html>